<template>
	<view class="page">
		<view class="background">
			<image :src="avatar" mode="" style="width: 258upx;height: 258upx;border-radius: 50%;"></image>
			<text style="font-size: 44upx;color: #ffffff;margin-top: 32upx;">{{nickname}}</text>
		</view>
		<form @submit="formSubmit" class="userinfo" report-submit="true">
			<view class="section">
				<view class="section__title">姓名</view>
				<input class="section__input" name="realname" placeholder-class="section__placeholder" placeholder="请输入姓名" v-model="realname"/>
			</view>
			<view class="section">
				<view class="section__title">生日</view>
				<picker mode="date" start="1950-01-01" :end="today" @change="dateChange" :value="birthday">
					<view class="section__placeholder" v-if="birthday==''">
						请选择生日
					</view>
					<view class="section__input" v-else>{{birthday}}</view>
				</picker>
			</view>
			<view class="section">
				<view class="section__title">手机号</view>
				<input class="section__input" name="phone" placeholder-class="section__placeholder" placeholder="请输入手机号" v-model="phone"/>
			</view>
			<button formType="submit" class="btn-submit"><image src="../../static/arrow-right.png" mode="" style="width: 32upx;height: 30upx;"></image></button>
		</form>
	</view>
</template>
<script>
	export default {
		data() {
			let date=new Date();
			return {
				today:date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate(),
				birthday:"",
				phone:"",
				realname:"",
				avatar:"",
				nickname:"",
				from:"",
			};
		},
		onLoad:function(e) {
			this.avatar=e.avatar;
			this.nickname=e.nickname;
			if(e.from){
				this.from=decodeURIComponent(e.from);
			}else{
				this.from="";
			}
		},
		methods: {
			dateChange:function(e) {
				this.birthday=e.detail.value;
			},
			getPhoneNumber:function(e){
				var that=this;
				uni.login({
					provider:"weixin",
					success:function(res) {
						if(e.detail.errMsg=="getPhoneNumber:ok"){
							that.ajax("/login/get_phone_number/",{
								code:res.code,
								iv:e.detail.iv,
								data:e.detail.encryptedData
							},function(phone){
								that.phone=phone.data.data;
							});
							
						}else{
							console.log("获取手机号失败");
							uni.showToast({
								icon:"none",
								title:"请授权获取您的手机号码",
							})
						}
					}
				})
				
			},
			formSubmit:function(e){
				var that=this;
				if(this.realname==""){
					uni.showToast({
						icon:"none",
						title:"请输入姓名",
					});
					return;
				}
				if(this.birthday==""){
					uni.showToast({
						icon:"none",
						title:"请选择生日",
					});
					return;
				}
				if(this.phone==""){
					uni.showToast({
						icon:"none",
						title:"请授权获取手机号",
					});
					return;
				}
				uni.showLoading({
					title:"提交中",
				});
				that.ajax("/login/join",{
					token:uni.getStorageSync("token"),
					realname:this.realname,
					phone:this.phone,
					avatar:this.avatar,
					birthday:this.birthday,
					nickname:this.nickname,
					form_id:e.detail.formId,
				},function(res){
					if(that.from){
						uni.navigateBack({
							delta:2
						})
					}else{
						uni.reLaunch({
							url:"/pages/index/index",
						})
					}
				});
			}
		},
	}
</script>

<style>
	.page{
		position: relative;
	}
	.background{
		background: #478E7E;
		height: 756upx;
		display: flex;
		flex-direction: column;
		align-content: center;
		align-items: center;
		padding-top: 40upx;
	}
	.userinfo{
		position: absolute;
		top: 458upx;
		left: 74upx;
		width: 602upx;
		height: 486upx;
		background: #ffffff;
		box-shadow:0upx 4upx 28upx 0upx rgba(24,148,120,0.1);
		border-radius:24upx;
		padding-top: 8upx;
	}
	.section{
		padding: 20upx 32upx 10upx 32upx;
		border-bottom: 1upx solid #E9E9E9;
	}
	.section__title{
		font-size: 28upx;
		color: #ABABAB;
		line-height: 40upx;
	}
	.section__input{
		color: #4B4B4B;
		font-size: 32upx;
	}
	.section__placeholder{
		color: #8B8B8B;
		font-size: 32upx;
	}
	.btn-phone{
		margin: 0;
		padding: 0;
		background: #FFFFFF;
		border: none;
		font-size: 32upx;
		color: #478E7E;
		text-align: left;
		line-height: 1.5;
	}
	.btn-phone:after{
		border: none;
	}
	.btn-submit{
		position: relative;
		bottom: -47upx;
		left: 50%;
		margin-left: -47upx;
		width:94upx;
		height:94upx;
		background:rgba(71,142,126,1);
		box-shadow:0upx 10upx 20upx 0upx rgba(24,148,120,0.49);
		border-radius: 50%;
		padding-top: 8upx;
	}
</style>
